@extends("admin.layout.main")

@section("content")
    <!-- 引入样式 -->
    {{--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--}}

<div id="app" style="width: 100%">
    {{-- 删除modal --}}
    <Modal v-model="delModal" width="360">
        <p slot="header" style="color:#f70;text-align:center">
            <span>删除确认</span>
        </p>
        <div style="text-align:center">

            <p>确定要删除吗?</p>
        </div>
        <div slot="footer">
            <i-button type="error" size="large" long  @click="del">删除</i-button>
        </div>
    </Modal>
   {{-- 管理员modal--}}
    <Modal v-model="permissionModal" width="360">
        <p slot="header" style="color:#f70;text-align:center">
            <span>权限配置弹框</span>
        </p>
        <div style="text-align:center">
            <p class="x-margin-10"><label>权限名称 : </label> <i-input v-model="name" style="width:220px"></i-input></p>
            <p class="x-margin-10"><label>http路径 : </label> <i-input v-model="http_path" style="width:220px" ></i-input></p>
            <p class="x-margin-10"><label>请求方式 : </label> <i-input v-model="http_method" style="width:220px" ></i-input></p>
            <p class="x-margin-10"><label>父级菜单 : </label>
                <select v-model="parent_id" style="width:220px;height: 35px" >
                    <option :value=0  style="border: 1px solid darkgray">root</option>
                    <option v-for="item of parent_menu" :value="item.id" >@{{ item.name }}</option>
                </select>
            </p>

            <p class="x-margin-10 "><label>是否菜单 : </label>
                <span style="width:220px;display: inline-block" >
                    <span style="width:60px;display: inline-block">
                         <input type="radio" value="1" v-model="is_menu" ><span style="font-weight: bold;font-size:14px;padding-left: 5px">菜单</span>
                    </span>
                    <span style="width:70px;display: inline-block">
                        <input type="radio" value="0"  v-model="is_menu"><span style="font-weight: bold;font-size:14px;padding-left: 5px">非菜单</span>
                    </span>

                </span>

            </p>
            <p class="x-margin-10" v-if="is_menu == 1"><label>菜单名称 : </label> <i-input v-model="menu_name" style="width:220px" ></i-input></p>
            <p class="x-margin-10" v-if="is_menu == 1"><label>菜单图标 : </label> <i-input v-model="menu_icon" style="width:220px" ></i-input></p>

        </div>
        <div slot="footer">
            <i-button type="primary" size="large" long  @click="submit">保存</i-button>
        </div>
    </Modal>

    {{--主体代码--}}
    <Row type="flex" justify="center" align="middle">

        <Spin size="large" fix v-if="spinShow"></Spin>
        <i-col span="23" >
            <span>
                 <i-button type="primary" @click="permissionModalUp()">权限配置</i-button>
            </span>
            <span>
                 <i-button type="error" @click="delModalUp()">批量删除</i-button>
            </span>
        </i-col>

    </Row>
    <Row  justify="center" align="middle" >
        <i-col  style="margin-top: 20px;width: 100%">
            <i-table  ref="selection" :data="tableData" :columns="tableColumns" >
            </i-table>
        </i-col>
    </Row>

</div>
<script src="/js/vue.js"></script>
    <!-- 引入组件库 -->
    {{--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--}}
<script  src="/js/iview.js"></script>
<script  src="/js/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                delModal:false,
                adminModal:false,
                token:'',
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '权限名称',
                        key: 'name',
                        render:(h,params) => {
                            name = params.row.name;
                            level = params.row.level;
                            let level_str = '- - | ';
                            let repeat_str = '';
                            if(level>1){
                                for (i = 1;i< level;i++) {
                                    repeat_str = repeat_str+level_str;
                                }
                            }
                            return h('div',{
                            },repeat_str+name);
                        }

                    },
                    {
                        title: '权限路径',
                        key: 'http_path',
                        render:(h,params) => {
                            http_path = params.row.http_path;
                            if(!http_path){
                                http_path = '暂无';
                            }
                            return h('div',{},http_path);
                        }
                    },
                    {
                        title: '请求方式',
                        key: 'http_method',
                        render:(h,params) => {
                            http_method = params.row.http_method;
                            if(!http_method){
                                http_method = '暂无';
                            }
                            return h('div',{},http_method);
                        }
                    },
                    {
                        title: '深度',
                        key: 'level',
                    },
                    {
                        title: '图标',
                        key: 'menu_icon',
                    },
                    {
                        title: '是否菜单',
                        key: 'is_menu',
                        render:(h,params) => {

                            let is_menu = params.row.is_menu == 1 ? '是':'否';

                            return h('label',{},is_menu);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            let row = params.row;
                            return h('div', [
                                h('i-button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            this.permissionModalUp(row.name,row.http_path,row.http_method,
                                                row.is_menu,row.menu_name,row.parent_id,row.id,row.menu_icon);
                                        }

                                    }

                                }, "编辑"),
                                h('i-button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            this.delModalUp(row.id);
                                        }
                                    }

                                }, "删除"),
                            ]);
                        }
                    }
                ],

                spinShow:false,
                permissionModal:false,
                tableData: [],
                http_path:'',
                http_method:'',
                is_menu:1,
                parent_id:0,
                menu_name:'',
                menu_icon:'',
                name:'',
                id:'',
                batch_ids:[],
                parent_menu:[]
            }
        },
        mounted(){
            this.token = window.localStorage.getItem('current_user');
            this.$Message.config({
                top: 90,
                duration: 3
            });
        },
        methods:{
            permissionModalUp(name = '',http_path = '',http_method = '',
            is_menu = 1,menu_name = '',parent_id = 0,id = '',menu_icon = ''){

                this.id = id;
                this.http_path = http_path;
                this.name = name;
                this.http_method = http_method;
                this.is_menu = is_menu;
                this.menu_name = menu_name;
                this.parent_id = parent_id;
                this.menu_icon = menu_icon;
                this.permissionModal = true;
            },
            delModalUp(id = ''){
                batch_ids = [];
                if(id){
                    batch_ids = [id];
                }else{
                    batch_ids = this.batch();
                    if(batch_ids.length == 0){
                        this.$Message.info('请先勾选');
                        return false;
                    }

                }
                this.batch_ids = batch_ids;
                this.delModal = true;
            },
            batch() {
                let ids = [];
                this.$refs.selection.getSelection().map(item => {
                    ids.push(item.id);
                });
                return ids;
            },
            permissionList(){
                axios.get('/admin/permission/list', {
                    params: {
                        token:vm.token,
                    }
                }).then((response) => {
                    vm.tableData = response.data.result.list;
                    vm.parent_menu = response.data.result.parent;
                })
            },
            submit(){
                that = this;
                axios.post('/admin/permission/store',
                    {
                        id:that.id,
                        name:that.name,
                        http_path:that.http_path,
                        http_method:that.http_method,
                        parent_id:that.parent_id,
                        is_menu:that.is_menu,
                        menu_name:that.menu_name,
                        menu_icon:that.menu_icon,
                        token:that.token,
                    }
                ).then(response => {
                    that.adminModal = false;
                    if(response.data.code == 200){
                        that.permissionModal = false;
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.permissionList();
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            },
            del(){
                that = this;

                axios.post('/admin/permission/del',
                    {
                        ids:that.batch_ids,
                        token:that.token,
                    }
                ).then(response => {
                    that.delModal = false;
                    if(response.data.code == 200){
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.permissionList();
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            }
        }
    })
    vm.permissionList();


</script>

@endsection

